<template>
    <div class="test">
        <span ref="s1">这里是ref引用子组件学习</span><br/>
        <button @click="printThis">打印this(默认$refs对象是空对象；当在dom标签中写入ref属性之后，这个值也就有了)</button>
        <br/>
        <button @click="changeColor">文字变色</button>
        <hr>
        <span>通过ref控制子组件</span><br/>
        <button @click="changeSon">子组件msg矿化</button>
        <son ref="son"></son>
        <hr>
        <input v-if="inputShow" @blur="showButton" ref="myInput">
        <button v-else @click="showInput">展示输入框</button>
    </div>
</template>

<script>
    import son from '@/components/ref-learn/son.vue';

    export default {
        name: "RefLearn",
        data() {
            return {
                flag: true,
                inputShow: false
            }
        },
        methods: {
            printThis() {
                console.log('print this', this);
            },
            changeColor() {
                if (this.flag) {
                    this.$refs.s1.style.color = 'red';
                } else {
                    this.$refs.s1.style.color = 'black';
                }
                this.flag = !this.flag;
            },
            changeSon() {
                this.$refs.son.msg = '法外狂徒-' + this.$refs.son.msg;
            },
            showInput() {
                this.inputShow = true;
                // this.$refs.myInput.focus(); //这样直接写会报错，因为页面还没有渲染成功呢
                this.$nextTick(()=>{
                    this.$refs.myInput.focus();
                });
            },
            showButton() {
                this.inputShow = false;
            }
        },
        components: {
            son
        }
    }
</script>

<style scoped>
    .test {
        /*height: 250px;*/
        background-color: #985f0d;
    }
</style>